<template>
  <div>
    <div class="mask"></div>
    <div class="clerk">
      <div class="close">
        <p>新建资料</p>
        <i
          class="el-icon-close"
          @click="hanldeCloseClerk({ status: false })"
        ></i>
      </div>
      <div class="form_wrap">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="厂商">
            <el-select
              :disabled="tempRowData.type === 3"
              placeholder="请输入厂商"
              clearable
              v-model="params.manufacturerName"
              @change="handleManufacturer"
            >
              <el-option
                v-for="(item, _index) in manufacturer"
                :key="item.id"
                :label="item.no + ' ' + item.name"
                :value="_index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款日期">
            <el-date-picker
              :clearable="false"
              :disabled="tempRowData.type === 3"
              class="picker_data"
              v-model="params.sequenceTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="款号">
            <el-input
              class="update-input"
              placeholder="请输入款号"
              clearable
              v-model="params.sequence"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="付款金额">
            <el-input
              class="update-input"
              placeholder="请输入付款金额"
              clearable
              type="number"
              v-model.number="params.money"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="btn_wrap">
          <el-button @click="hanldeCloseClerk({ status: false })"
            >取消</el-button
          >
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
        <!-- <div>
          <span class="mr-8">厂商</span>
          <el-select
            class="mr-8"
            placeholder="请选择"
            clearable
            v-model="params.manufacturerName"
            @change="handleManufacturer"
          >
            <el-option
              v-for="(item, _index) in manufacturer"
              :key="item.id"
              :label="item.brandedCompany + ' ' + item.no"
              :value="_index"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span class="mr-8">付款日期</span>
          <el-date-picker
            class="picker_data"
            v-model="params.sequenceTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <div>
          <span class="mr-8">款号</span>
          <el-input
            class="update-input"
            placeholder="请输入款号"
            clearable
            v-model="params.sequence"
          ></el-input>
        </div>
        <div>
          <span class="mr-8">付款金额</span>
          <el-input
            class="update-input"
            placeholder="请输入付款金额"
            clearable
            type="number"
            v-model.number="params.money"
          ></el-input>
        </div>
        <div class="btn_wrap">
          <el-button @click="hanldeCloseClerk">取消</el-button>
          <el-button @click="handleSave">保存</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getManufacturer } from '../../../../network/manufacturer'
import {
  getManufacturerList,
  getManufacturerRefreshList,
  addManufacturer,
  updateMoney,
  deleteRecord
} from '@/request/input/K_VendorPaymentDetail'

import { changeDate } from '../../../../util/util'
import { now } from 'moment'

export default {
  props: {
    rowData: {
      type: Object,
      required: false,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      value: '',
      params: {
        manufacturerName: '',
        manufacturerNo: '',
        sequenceTime: new Date(),
        sequence: null,
        money: 0
      },
      // 厂商编号
      manufacturer: [],
      tempRowData: {}
    }
  },
  created() {
    this.getManufacturer()
    let temp = JSON.stringify(this.rowData)
    if (temp != '{}') {
      this.tempRowData = this.rowData
      this.params.manufacturerName = this.rowData.manufacturerName
      this.params.manufacturerNo = this.rowData.manufacturerNo
      this.params.sequenceTime = this.rowData.sequenceTime
      this.params.sequence = this.rowData.sequence
      this.params.money = this.rowData.money
    }
  },
  methods: {
    // 保存
    async handleSave() {
      let temp = JSON.stringify(this.rowData)
      // 编辑
      // console.log(temp)
      if (temp != '{}') {
        const query = {
          money: this.params.money,
          sequence: this.params.sequence
        }
        const res = await updateMoney(query)
        if (res.data.code === 200) {
          this.hanldeCloseClerk({ status: true })
          this.tempRowData = {}
          this.$message.success(res.data.msg)
        }
      } else {
        // 保存
        const { data } = await addManufacturer(JSON.stringify(this.params))
        if (data && data.code === 200) {
          this.$message.success(data.msg)
          this.hanldeCloseClerk({ status: false })
        }
      }
    },
    // 厂商编号
    async getManufacturer() {
      const { data } = await getManufacturer()
      if (data && data.code === 200) {
        this.manufacturer = data.data
      }
    },
    // 选择厂商编号
    handleManufacturer(_index) {
      // console.log(this.manufacturer[_index])
      this.params.manufacturerName = this.manufacturer[_index].name
      this.params.manufacturerNo = this.manufacturer[_index].no
    },
    hanldeCloseClerk(e) {
      // console.log(e)
      this.$emit('hanldeCloseClerk', e)
    }
  }
}
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 99;
}
.clerk {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  z-index: 99;
  background-color: white;
  overflow: auto;
  .close {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f4f4f4;
    font-weight: 700;
    p {
      margin: 0;
    }
  }
  .form_wrap {
    padding-top: 16px;
    width: 50%;
    margin: 0 auto;
    .el-form {
      .el-form-item {
        .el-form-item__content {
          .el-select {
            /deep/.el-input__inner {
              height: 32px;
            }
          }
          .el-date-editor {
            /deep/.el-input__inner {
              width: 202px;
              height: 32px;
            }
          }
        }
      }
    }
    .btn_wrap {
      width: 50%;
      align-items: center;
      padding-bottom: 20px;
      margin: 0 auto;
    }
  }
  // .input_wrap {
  //   background-color: rebeccapurple;
  //   div {
  //     text-align: center;
  //     margin: 0 auto;
  //     margin: 10px 0;
  //   }
  //   .picker_data {
  //     height: 32px;
  //     .el-icon-time {
  //       line-height: 27px;
  //     }
  //     .el-range-separator {
  //       line-height: 24px;
  //     }
  //     .el-input__icon {
  //       line-height: 27px;
  //     }
  //     .el-range__close-icon {
  //       line-height: 27px;
  //     }
  //   }
  //   .btn_wrap {
  //     padding-bottom: 20px;
  //   }
  // }
}
</style>
